<template>
  <section class="about section" id="about">
    <h2 class="section__title">{{ $t('about__title') }}</h2>
    <span class="section__subtitle">{{ $t('about__subtitle') }}</span>
    <div class="about__container container grid">
      <img src="@/assets/img/portfolio3.jpg" class="about__img">

      <div class="about__data">
        <div>
          <p class="about__description" v-for="(item,index) in descriptionList" :key="index">
            {{ $t(`${item.key}`) }}
          </p>
        </div>

        <div class="about__info">
          <div class="about__info-item">
            <span class="about__info-title">26</span>
            <span class="about__info-name">{{ $t('about__info-name1') }}</span>
          </div>
          <div class="about__info-item">
            <span class="about__info-title">02+</span>
            <span class="about__info-name">{{ $t('about__info-name2') }}</span>
          </div>
          <div class="about__info-item">
            <span class="about__info-title">02+</span>
            <span class="about__info-name">{{ $t('about__info-name3') }}</span>
          </div>
        </div>
        <div class="about__buttons">
          <a
              download=""
              :href="publicPath+'/pdf/18756185372-杨梦飞.pdf'"
              class="button button--flex about__buttons-download"
          >
            <span i18n="download">{{ $t('download') }}</span>
            <i class="iconfont icon-downloadxiazai button__icon"></i>
          </a>
        </div>
      </div>
    </div>
  </section>
</template>
<script setup>
import {ref} from 'vue';

const publicPath = process.env.NODE_ENV === 'production' ? '/my-introduce-web' : ''
const descriptionList = ref([
  {key: 'about__description1'},
  {key: 'about__description2'},
  {key: 'about__description3'},
  {key: 'about__description4'}
])
</script>
<style lang="scss" scoped>
.about {
  &__container {
    @include min-screen(568px) {
      grid-template-columns: repeat(2, 1fr);
    }
    @include min-screen(768px) {
      column-gap: 5rem;
    }
  }

  &__data {
    max-width: 344px;
  }

  &__buttons {
    &-download {
      .button__icon:hover {
        transform: translateY(0.25rem);
      }
    }
  }

  &__img {
    width: 200px;
    border-radius: 0.5rem;
    justify-self: center;
    align-self: center;
    @include min-screen(768px) {
      width: 350px;
    }
  }

  &__description {
    text-align: center;
    margin-bottom: var(--mb-0-5);
    @include min-screen(768px) {
      text-align: initial;
    }
  }

  &__info {
    display: flex;
    justify-content: space-evenly;
    margin: 20px 0;
    @include min-screen(768px) {
      justify-content: space-between;
    }

    &-item {
      flex: 1;
    }
  }

  &__info-title {
    font-size: var(--h2-font-size);
    font-weight: var(--font-semi-bold);
    color: var(--title-color);
    margin-bottom: var(--mb-0-5);
  }

  &__info-name {
    font-size: var(--smaller-font-size);
  }

  &__info-title,
  &__info-name {
    display: block;
    text-align: center;
  }

}
</style>
